<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>代码配置管理</title>
    <div th:replace="common/base"></div>
    <style>
        .layui-table-cell, .layui-table-tool-panel li {
            overflow: visible !important;
        }

        .layui-form-select .layui-input {
            height: 30px;
        }

        .layui-table-box {
            overflow: visible !important;
        }

        .layui-table-body {
            overflow: visible !important;
        }
    </style>

</head>
<body>
<!--<div class="layui-fluid">-->
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                <div style="height: 30px;line-height: 30px;padding: 6px">
                    <span style="font-weight: 700;color: #303133;font-size: 15px;">字段配置</span>
                    <button id="btnSaveAndSync" class="layui-btn layui-btn-sm data-add-btn" lay-event="savePre"
                            style="float:right;margin-left: 10px;display:none">
                        保存&生成
                    </button>
                    <button id="btnSave" class="layui-btn layui-btn-sm data-add-btn" lay-event="save"
                            style="float:right">
                        &nbsp;&nbsp;保存&nbsp;&nbsp;
                    </button>
                    <button id="btnSync" class="layui-btn layui-btn-sm data-add-btn" lay-event="sync"
                            style="float:right;display:none">
                        &nbsp;&nbsp;同步&nbsp;&nbsp;
                    </button>
                </div>
            </div>
            <div class="layui-card-body" pad15>
                <table id="configTable" lay-filter="configTable"></table>
            </div>
        </div>
    </div>
</div>

<!--</div>-->

<!--<div class="layui-fluid">-->
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card layui-form model-form " action="" lay-filter="configFrm" style="padding-top: 0px">
            <div class="layui-card-header">
                <div style="height: 30px;line-height: 30px;padding: 6px">
                    <span style="font-weight: 700;color: #303133;font-size: 15px;">生成配置</span>
                    <button class="layui-btn layui-btn-sm" lay-filter="configSubmit" lay-submit style="float:right">
                        &nbsp;&nbsp;保存&nbsp;&nbsp;
                    </button>
                </div>
            </div>
            <input type="hidden" name="id">
            <input type="hidden" name="tableName">
            <div class="layui-card-body" pad15>
                <div class="layui-form-item">
                    <label class="layui-form-label">作者名称</label>
                    <div>
                        <div style="display: inline-block;width: 40%;min-height: 36px">
                            <input type="text" name="author" lay-verify="required" autocomplete="off"
                                   placeholder="" class="layui-input">
                        </div>
                        <span style="color: rgb(192, 192, 192);margin-left: 10px;">类上面的作者名称</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">模块名称</label>
                    <div>
                        <div style="display: inline-block;width: 40%;min-height: 36px">
                            <input type="text" name="moduleName" lay-verify="required" autocomplete="off"
                                   placeholder="" class="layui-input">
                        </div>
                        <span style="color: rgb(192, 192, 192);margin-left: 10px;">模块的名称，请选择项目中已存在的模块</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">至于包下</label>
                    <div>
                        <div style="display: inline-block;width: 40%;min-height: 36px">
                            <input type="text" name="pack" lay-verify="required" autocomplete="off"
                                   placeholder="" class="layui-input">
                        </div>
                        <span style="color: rgb(192, 192, 192);margin-left: 10px;">项目包的名称，生成的代码放到哪个包里面</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">接口名称</label>
                    <div>
                        <div style="display: inline-block;width: 40%;min-height: 36px">
                            <input type="text" name="apiAlias" lay-verify="required" autocomplete="off"
                                   placeholder="" class="layui-input">
                        </div>
                        <span style="color: rgb(192, 192, 192);margin-left: 10px;">接口的名称，用于控制器与接口文档中</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">前端路径</label>
                    <div>
                        <div style="display: inline-block;width: 40%;min-height: 36px">
                            <input type="text" name="path" lay-verify="required" autocomplete="off"
                                   placeholder="" class="layui-input">
                        </div>
                        <span style="color: rgb(192, 192, 192);margin-left: 10px;">输入views文件夹下的目录，不存在即创建</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">去表前缀</label>
                    <div>
                        <div style="display: inline-block;width: 40%;min-height: 36px">
                            <input type="text" name="prefix" autocomplete="off"
                                   placeholder="" class="layui-input">
                        </div>
                        <span style="color: rgb(192, 192, 192);margin-left: 10px;">默认不去除表前缀，可自定义</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否覆盖</label>
                    <div>
                        <div style="display: inline-block;width: 40%;min-height: 36px">
                            <input type="checkbox" name="cover" title="是" value="true">
                        </div>
                        <span style="color: rgb(192, 192, 192);margin-left: 10px;">谨防误操作，请慎重选择</span>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!--</div>-->
<!-- 表格必填列 -->
<script type="text/html" id="configTbNotNull">
    <input type="checkbox" lay-filter="configTbNotNullCk" value="{{d.id}}" lay-skin="primary"
           {{d.notNull==true?'checked':''}}/>
</script>
<!-- 表格列表列 -->
<script type="text/html" id="configTbListShow">
    <input type="checkbox" lay-filter="configTbListShowCk" value="{{d.id}}" lay-skin="primary"
           {{d.listShow==true?'checked':''}}/>
</script>
<!-- 表格表单列 -->
<script type="text/html" id="configTbFormShow">
    <input type="checkbox" lay-filter="configTbFormShowCk" value="{{d.id}}" lay-skin="primary"
           {{d.formShow==true?'checked':''}}/>
</script>
<!-- 表格表单列 -->
<script type="text/html" id="configTbFormType">
    <select name="configTbFormTypeSel" lay-filter="configTbFormTypeSel" value="{{d.id}}" style="height: 20px">
        <option value="{{d.id}}-">请选择标签</option>
        <option value="{{d.id}}-Input" {{d.formType=='Input'?'selected':''}}>文本框</option>
        <option value="{{d.id}}-Textarea" {{d.formType=='Textarea'?'selected':''}}>文本域</option>
        <option value="{{d.id}}-Radio" {{d.formType=='Radio'?'selected':''}}>单选框</option>
        <option value="{{d.id}}-Date" {{d.formType=='Date'?'selected':''}}>日期框</option>
    </select>
</script>
<div th:replace="common/baseJS"></div>
<script th:inline="none">
    layui.use(['form', 'table', 'ab'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            ab = layui.ab,
            tableDataList = [];

        var tableName = ab.util.request("tableName");
        var configTable = table.render({
            elem: '#configTable',
            url: '/code/generator/columns?tableName=' + tableName,
            // maxHeight: "400px",
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                {field: 'id', width: 80, title: 'ID', hide: true},
                {field: 'columnName', title: '字段名称'},
                {field: 'columnType', title: '字段类型'},
                {field: 'remark', title: '字段描述'},
                {field: 'notNull', title: '必填', templet: '#configTbNotNull'},
                {field: 'listShow', title: '列表', templet: '#configTbListShow'},
                {field: 'formShow', title: '表单', templet: '#configTbFormShow'},
                {field: 'formType', title: '表单类型', templet: '#configTbFormType'},
                {field: 'queryType', title: '查询方式', hide: true}
            ]],
            response: {
                statusName: 'status', //规定数据状态的字段名称，默认：code
                statusCode: 200, //规定成功的状态码，默认：0
                msgName: 'hint', //规定状态信息的字段名称，默认：msg
                countName: 'total', //规定数据总数的字段名称，默认：count
                dataName: 'rows' //规定数据列表的字段名称，默认：data
            },
            done: function (res) {
                tableDataList = res.rows;
            },
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: false,
            skin: 'line'
        });

        //监听提交
        form.on('submit(configSubmit)', function (data) {
            var configIdx = layer.load(2);
            ab.util.submitForm({
                url: "/code/genConfig",// 请求地址
                type: "put",// 请求提交方式
                data: JSON.stringify(data.field),// 发送回去的数据 JSON.stringify(data)
                success: function (data) {
                    layer.close(configIdx);
                },
                error: function () {
                    layer.close(configIdx);
                }
            });
            return true;
        });

        /* 修改必填列 */
        form.on('checkbox(configTbNotNullCk)', function (obj) {
            for (var i = 0; i < tableDataList.length; i++) {
                if (tableDataList[i].id == obj.value) {
                    tableDataList[i].notNull = obj.elem.checked;
                }
            }
        });
        /* 修改列表列 */
        form.on('checkbox(configTbListShowCk)', function (obj) {
            for (var i = 0; i < tableDataList.length; i++) {
                if (tableDataList[i].id == obj.value) {
                    tableDataList[i].listShow = obj.elem.checked;
                }
            }
        });
        /* 修改表单列 */
        form.on('checkbox(configTbFormShowCk)', function (obj) {
            for (var i = 0; i < tableDataList.length; i++) {
                if (tableDataList[i].id == obj.value) {
                    tableDataList[i].formShow = obj.elem.checked;
                }
            }
        });
        /* 修改表单类型 */
        form.on('select(configTbFormTypeSel)', function (obj) {
            // console.log(obj)
            var resultArr = obj.value.split('-');
            for (var i = 0; i < tableDataList.length; i++) {
                if (tableDataList[i].id == resultArr[0]) {
                    tableDataList[i].formType = resultArr[1];
                }
            }
        });

        if (!!tableName) { //加载配置
            //调用查询
            ab.ajax({
                url: "/code/genConfig/" + tableName,// 请求地址
                type: "get",// 请求提交方式
                data: {tableName: tableName},// 发送回去的数据 JSON.stringify(data)
                success: function (data) {
                    form.val("configFrm", data);
                },
                error: function () {

                }
            })
        }

        $("#btnSave").click(function () {
            // console.log(layui.table.cache["configTable"]);
            // console.log(tableDataList)
            var fieldConfigIdx = layer.load(2);
            ab.util.submitForm({
                url: "/code/generator",// 请求地址
                type: "put",// 请求提交方式
                data: JSON.stringify(tableDataList),// 发送回去的数据 JSON.stringify(data)
                success: function (data) {
                    layer.close(fieldConfigIdx);
                }
            });
        });
    });
</script>
</body>
</html>